<template>
    <div class="verify_solc bg">
        <div class="container">
            <div class="verify_solc_top">
                <h2>Verify & Publish Contract Source Code</h2>
                <span class="span_tip">COMPILER TYPE AND VERSION SELECTION</span>
            </div>
            <div class="tips">
                Info: A simple and structured interface for verifying smart contracts that fit in a single file
            </div>

            <el-tabs class="bolck_table" v-model="activeName" @tab-click="handleClick">
                <el-tab-pane name="first" v-loading="loading" element-loading-text="Loading...">
                    <template #label>
                        <h4><span>Contract Source Code</span></h4>
                    </template>
                    <div class="verify_solc_container">
                        <el-alert type="info">
                            <p>1. If the contract compiles correctly at REMIX, it should also compile correctly here.
                                <br>2. We have limited support for verifying contracts created by another contract and there
                                is a timeout of up to 45 seconds for each contract compiled.
                                <br>3. For programatic contract verification, check out the Contract API Endpoint'
                            </p>
                        </el-alert>

                        <el-row class="m_top" :gutter="20">
                            <el-col :md="10">
                                <p>Contract Address</p>
                                <el-input v-model="address" :readonly="true">
                                </el-input>
                            </el-col>

                            <el-col :md="10">
                                <p>Compiler</p>
                                <el-select v-model="this.$route.query.c" disabled>
                                    <el-option v-for="item in versionOptions" :key="item.value" :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-col>

                            <el-col :md="4">
                                <p>Optimization</p>
                                <el-select v-model="isOptimizationVal">
                                    <el-option v-for="item in optimization" :key="item.value" :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-col>
                        </el-row>

                        <div class="m_top">
                            <h5>Enter the Solidity Contract Code below <i class="red">*</i></h5>
                            <el-input type="textarea" :rows="10" v-model="tCode">
                            </el-input>
                        </div>

                        <div class="collapse_div">
                            <el-collapse>
                                <el-collapse-item name="1">
                                    <template #title>
                                        <div class="collapse_div_box">
                                            Constructor Arguments <a
                                                href="https://docs.soliditylang.org/en/develop/abi-spec.html"
                                                target="_blank">ABI-encoded</a> <span>(for contracts that were created with
                                                constructor parameters)</span>
                                        </div>
                                    </template>
                                    <div class="div_item">
                                        <el-input type="textarea" :rows="3" v-model="params">
                                        </el-input>
                                        <p class="p_tips">For additional information on Constructor Arguments see Our KB
                                            Entry </p>
                                    </div>
                                </el-collapse-item>
                                <el-collapse-item name="2">
                                    <template #title>
                                        <div class="collapse_div_box">
                                            Contract Library Address <span>(for contracts that use libraries, supports up to
                                                10 libraries)</span>
                                        </div>
                                    </template>
                                    <div class="div_item">
                                        <p class="note">
                                            Note: Library names are case sensitive and affects the keccak library hash
                                        </p>
                                        <el-row>
                                            <el-col :md="11">
                                                <p>Library_1 Name:</p>
                                                <el-input size="mini" v-model="input4"></el-input>
                                            </el-col>
                                            <el-col :md="2">
                                                <div class="center">
                                                    <el-icon>
                                                        <Right />
                                                    </el-icon>
                                                </div>
                                            </el-col>
                                            <el-col :md="11">
                                                <p>Library_1 Contract Address:</p>
                                                <el-input size="mini" placeholder="0x....." v-model="input4"></el-input>
                                            </el-col>
                                        </el-row>
                                    </div>
                                </el-collapse-item>
                                <el-collapse-item name="3">
                                    <template #title>
                                        <div class="collapse_div_box">
                                            <!-- <el-tooltip effect="dark" placement="top">
                                            <template #content>
                                            <div>We auto pre-filled the constructor<br/> arguments with a suggested entry.<br/> ( Please re-check for validity <br/>before submitting )</div>
                                            <i class="el-icon-info" style="color:#999">1</i>
                                            </template>
                                        </el-tooltip> -->
                                            Misc Settings <span>(Runs, EvmVersion & License Type settings)</span>
                                        </div>
                                    </template>
                                    <div class="div_item">
                                        <el-row :gutter="40">
                                            <el-col :md="12">
                                                <p>Runs (Optimizer)</p>
                                                <el-input v-model="optimizer" type="number">
                                                </el-input>
                                            </el-col>
                                            <el-col :md="12">
                                                <p>LicenseTyp</p>
                                                <el-select v-model="value">
                                                    <el-option v-for="item in options" :key="item.value"
                                                        :value="item.value">
                                                    </el-option>
                                                </el-select>
                                            </el-col>
                                        </el-row>

                                    </div>
                                </el-collapse-item>
                            </el-collapse>

                            <div class="v_button">
                                <el-button @click="getVerifyContract" type="primary"> Verify and Publish </el-button>
                                <el-button type="info">Reset</el-button>
                                <el-button type="info">Return to Main</el-button>
                            </div>

                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane name="second" v-if="compiler">
                    <template #label>
                        <h4><span>Compiler Output</span></h4>
                    </template>
                    <div class="compiler_box">
                        <p><b>Compiler debug log:</b></p>

                        <div class="succsece" v-if="compiler.success == true">
                            <p>
                                <el-icon :size="16">
                                    <SuccessFilled />
                                </el-icon>
                                Note: Contract was created during TxHash# <router-link :to="'/tx/' + compiler.hash">
                                    {{ compiler.hash }}</router-link>
                            </p>
                            <p>
                                <el-icon :size="16">
                                    <SuccessFilled />
                                </el-icon>
                                <span style="color:#00c9a7">Successfully generated ByteCode and ABI for Contract Address
                                </span><router-link :to="'/address/' + address">[{{ address }}]</router-link>
                            </p>
                        </div>

                        <div v-if="compiler.success == false">
                            <p class="red"><el-icon :size="16">
                                    <CircleClose />
                                </el-icon> Error! Unable to generate Contract ByteCode and ABI <b
                                    v-if="error != ''">(General Exception, unable to get compiled [bytecode])</b></p>
                            <p v-if="error == ''"><el-icon :size="16">
                                    <DArrowRight />
                                </el-icon> Found the following ContractName(s) in source code :
                                <b>{{ compiler.contractName }}</b>
                            </p>
                            <p v-if="error == ''"><el-icon :size="16">
                                    <DArrowRight />
                                </el-icon> But we were unable to locate a matching bytecode (err_code_2)</p>
                            <p><el-icon :size="16">
                                    <WarningFilled />
                                </el-icon> For troubleshooting, you can try compiling your source code with the Remix -
                                Solidity IDE and check for exceptions</p>

                            <h5><b>Compiler Warning(s):</b></h5>
                            <div v-if="error" class="compiler_err">
                                <p v-html="error"></p>
                            </div>
                        </div>



                        <div class="compiler_err">
                            <p><b>Compiler Version:</b> {{ this.$route.query.c }}</p>
                            <p><b>Optimization Enabled:</b> {{ this.isOptimizationVal }}</p>
                            <p><b>Runs:</b> {{ this.optimizer }}</p>

                            <div v-if="compiler.success == true">
                                <h6>ContractName:</h6>
                                <div class="err_c">
                                    <p>{{ compiler.contractName }}</p>
                                </div>

                                <h6>byteCode:</h6>
                                <div class="err_c text">
                                    <p>{{ compiler.byteCode }}</p>
                                </div>

                                <h6>ABI:</h6>
                                <div class="err_c text">
                                    <p>{{ compiler.abi }}</p>
                                </div>
                            </div>
                            <div v-if="compiler.success == false">
                                <div class="err_c">
                                    <p>ByteCode (what we are looking for):</p>
                                    <p>{{ compiler.byteCode }}</p>
                                </div>

                                <div v-if="error == ''">
                                    <p class="p_margin">- vs what we got -</p>
                                    <p>We tried looking for a match from the list of compiled contract bytecode outputs (as
                                        listed below), but was unable to find an exact match.</p>

                                    <div class="err_c" v-for="(itema, a) in compiler.getCode" :key="a">
                                        <p><b>{{ itema.contractName }}</b></p>
                                        <p>{{ itema.code }}</p>
                                    </div>
                                </div>
                            </div>

                        </div>

                        <el-button @click="() => { this.compiler = null; this.activeName = 'first' }" type="primary">Start
                            Over</el-button>

                    </div>
                </el-tab-pane>
            </el-tabs>



        </div>
    </div>
</template>

<script>
import { CircleClose, WarningFilled, DArrowRight, SuccessFilled, Right } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

export default {
    data() {
        return {
            activeName: 'first',
            loading: false,
            arr: [1, 2, 3, 4, 5, 6, 5, 1],
            address: this.$route.query.a,
            value: this.$route.query.lictype,
            isOptimizationVal: false,
            optimization: [{
                value: true,
                label: 'Yes'
            }, {
                value: false,
                label: 'No'
            }
            ],
            value1: '选项2',
            tCode: '',
            optimizer: 200,
            options: [
                { value: '[Please Select]', },
                { value: '1) No License (None)', },
                { value: '2) The Unlicense (Unlicense)' },
                { value: '3) MIT License (MIT)' },
                { value: '4) GNU General Public License v2.0 (GNU GPLv2)' },
                { value: '5) GNU General Public License v3.0 (GNU GPLv3)' },
                { value: '6) GNU Lesser General Public License v2.1 (GNU LGPLv2.1)' },
                { value: '7) GNU Lesser General Public License v3.0 (GNU LGPLv3)' },
                { value: '8) BSD 2-clause "Simplified" license (BSD-2-Clause)' },
                { value: '9) BSD 3-clause "New" Or "Revised" license (BSD-3-Clause)' },
                { value: '10) Mozilla Public License 2.0 (MPL-2.0)' },
                { value: '11) Open Software License 3.0 (OSL-3.0)' },
                { value: '12) Apache 2.0 (Apache-2.0)' },
                { value: '13) GNU Affero General Public License (GNU AGPLv3)' },
            ],
            compiler: null,
            error: '',
            params: ''
        }
    },
    mounted() {
        this.params = localStorage.getItem('params') || ''
        // this.getVerifyContract()
        console.log(this.$route.query)
    },
    methods: {
        getVerifyContract() {
            if (this.tCode == '') {
                alert('the Solidity Contract Code is Null')
                return false
            }
            var url = "/api/Scan/VerifyContract"
            var param = {
                "address": this.address,
                "compilerType": "Solidity (Single file)",
                "licenseType": this.value,
                "version": this.$route.query.c,
                "runs": (+this.optimizer) || 200,
                "optimization": this.isOptimizationVal,
                "contractCode": this.tCode,
                "parameter": this.params
            }
            this.loading = true
            this.$axios.post(url, param).then((res) => {
                // console.log(res)
                setTimeout(() => {
                    console.log(res)
                    if (res.code == 200) {
                        this.compiler = res.data
                        localStorage.setItem('compiler', res.data)
                        if (res.data && (res.data.error[0] != 'not found bytecode' && res.data.error.length > 0)) {
                            this.error = res.data.error[0].replace(/\n/g, '<br>')
                            console.log(this.error)
                        } else {
                            this.error = ''
                        }
                        // localStorage.setItem('error',this.error)
                        this.activeName = 'second'
                        this.loading = false
                    } else {
                        ElMessage.error(res?.code)
                    }
                    this.loading = false
                }, 2000)

            }).catch((err) => {
                // console.log(err)
                alert(err)
                this.loading = false
            })
        },
    },
    components: {
        CircleClose,
        WarningFilled,
        DArrowRight,
        SuccessFilled,
        Right
    }
}
</script>

<style lang="less" scoped>
.verify_solc {
    font-size: 0.85rem;
    padding: 50px 0;

    .center {
        margin: 25px auto 0;
        width: 30px;
        height: 30px;
        background: #eee;
        text-align: center;
        line-height: 30px;
        border-radius: 50%;

        .el-icon {
            line-height: 30px;
            height: 30px;
        }

    }

    :deep(.el-textarea__inner) {
        color: var(--color-text);
        font-size: 0.7rem;
        line-height: 1.2rem
    }

    .tips {
        color: var(--color-text2);
    }

    .el-collapse {
        border: 0 !important;
    }

    .verify_solc_top {
        text-align: center;

        border-bottom: 1px solid var(--color-border);

        .span_tip {
            display: inline-block;
            margin: 20px 0;
            padding: 10px 30px;
            color: #fff;
            background: #00c9a7;
            font-size: 12px;
            border-radius: 2rem;

        }
    }

    .bolck_table {
        background: #fff;
        padding: 1rem 0;
        box-shadow: 0px 4px 10px 2px rgba(242, 242, 247, 0.5);
        border-radius: 12px;
        border: 1px solid #F2F2F7;

        h4 {
            line-height: 44px;

            span {
                display: inline-block;
                padding: 0 20px;
            }
        }

        .compiler_box {
            padding: 20px;
            font-size: 0.9rem;

            p {
                color: var(--color-text2);
                line-height: 2rem;
                vertical-align: middle;

                i {
                    vertical-align: middle;
                }
            }

            h5 {
                color: var(--color-text2);
                font-size: 1rem;
                margin-top: 2rem;
            }

            .compiler_err {
                padding: 1rem;
                margin: 1rem 0;
                border: 1px solid var(--color-border);
                background-color: #f8f9fa;
                box-shadow: 0 0.5rem 1.2rem #f4f4f4;
                border-radius: 8px;

                p {
                    font-size: 0.8rem;
                    color: #333;
                }

                .p_margin {
                    margin: 2rem 0;
                }
            }

            h6 {
                margin-top: 1.5rem;
            }

            .err_c {
                overflow: auto;
                border: 1px solid #e7eaf3;
                border-radius: .35rem;
                padding: .5rem 1rem;
                margin: 1rem 0;

                p {
                    white-space: pre;
                }
            }

            .text {
                p {
                    white-space: normal;
                }
            }

            .red {
                color: #ff3838;
            }
        }
    }

    .verify_solc_container {
        padding: 10px 20px;

        p {
            line-height: 24px;
            color: var(--color-text);
        }

        :deep(.el-alert__description) {
            font-size: 0.75rem;
        }

        .el-select {
            width: 100%;
        }

        .m_top {
            h5 {
                font-size: 14px;
                margin-bottom: 10px;
            }

            margin-top: 25px;

            div {
                p {
                    margin-bottom: 5px;
                }
            }
        }
    }

    .v_button {
        text-align: center;
        margin: 2rem 0;
    }

    .collapse_div {
        margin-top: 2rem;

        .el-collapse-item {
            &:hover {
                .collapse_div_box {
                    color: #7199d4;
                }
            }

            .collapse_div_box {
                line-height: 1.6rem;
            }

            .div_item {
                border-top: 1px solid #ddd;
                padding-top: 1rem;

                .note {
                    color: #777;
                    margin: 1rem 0 2rem;
                }

                .direction {
                    margin: 22px auto 0;
                    width: 30px;
                    height: 30px;
                    background: #eee;
                    text-align: center;
                    line-height: 30px;
                    border-radius: 50%;

                    span {
                        color: #666;
                    }
                }
            }

            margin-bottom: 2rem;
            padding: 0 10px 0 10px;
            box-shadow: 0 0.5rem 1.2rem rgb(189 197 209 / 20%);
            background-color: #fff;
            background-clip: border-box;
            border: 1px solid #e7eaf3;
            border-radius: .5rem;

            .collapse_div_box {
                span {
                    color: #888;
                }
            }

            .p_tips {
                margin-top: 1rem;
                color: #999;
            }
        }
    }

}
</style>